<template>
  <view>
    <!-- 推荐歌单详情列表 -->
    <item-SongList></item-SongList>

    <!-- 底部控制组件 -->
    <buttom-control :isPlay="isPlay" :songsLists=songsList @change-Play="changePaly"></buttom-control>
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  export default {

    onLoad(options) {
      const personalized = options.personalized_id
      // 获取推荐歌单的详情音乐列表
      this.getItemMusicList(personalized)
      this.getAllMusicList(personalized)
      this.isPlay = this.isPlayPage
    },
    computed: {
      // 调用 mapState 辅助方法，把 m_user 模块中的数据映射到当前用组件中使用
      ...mapState('musicDetailList', ['songsList']),
      ...mapState('musicPage', ['isPlayPage']),
    },
    watch: {
      isPlayPage() {
        this.isPlay = this.isPlayPage
      }
    },
    data() {
      return {
        // 是否播放
        isPlay: false
      }
    },
    methods: {

      // 是否播放
      changePaly(isPlay) {

        this.isPlay = isPlay
        this.$store.commit('musicPage/isPlay', this.isPlay)
      },
      // 获取推荐歌单的详情音乐列表
      async getItemMusicList(personalized) {
        const {
          data: res
        } = await uni.$http.get('/playlist/detail', {
          id: personalized
        })
        // 存到vuex本地
        this.$store.commit('musicDetailList/getItemMusicList', res.playlist)
      },
      // 获取所有推荐歌单的歌曲
      async getAllMusicList(personalized) {
        // console.log(personalized)
        const {
          data: res
        } = await uni.$http.get(`/playlist/track/all?id=${personalized}&limit=20&offset=0`)
        console.log(res)
        // 存到vuex本地
        this.$store.commit('musicDetailList/getAllMusicList', res.songs)
      }

    }
  }
</script>

<style>

</style>
